<template>
  <div class="doctorregister">
    <div class="container ">
      <!-- 头部信息 -->
      <header>
      <Row>
        <Col :xs="24">
          <div class="margin-up-down">
            <Button type="primary" @click="addSecordApply" class="addButton">
              <i class = "iconfont icon-add" style="font-size:14px;margin-right:5px"></i>
            </Button>
          </div>
          <div class="margin-up-down">
            <fourLevelLinkage
              @changeProvince="changeProvince"
              @changeCity="changeCity"
              @changeArea="changeArea"
              @changeHospital="changeHospital"
              :province="province"
              :city="city"
              :area="area"
              :hospital="hospital"
              :hospitalType="1"
            ></fourLevelLinkage>
          </div>
          <div class="margin-up-down">
              <Select class="w-select" clearable v-model="businessType" placeholder="复审类别" style='width:130px;'>
                  <Option
                      v-for="item in businessList"
                      :value="item.businessType"
                      :key="item.businessType"
                      style='text-align:center'
                  >{{item.name}}</Option>
              </Select>
          </div>  
          <div class="margin-up-down">
            <Button type="primary" icon="ios-search" @click="getSuperviseData(1)"></Button>
          </div>
        </Col>
      </Row>  
      </header>   
      <!-- 列表 -->
      <div class="list">
        <Table @on-selection-change="selectChange" :loading="tableLoading" border stripe :columns="columns1" :data="list"></Table>
      </div>
    </div>
    <!--分页器-->
    <div class="page">
      <Page :total="superviseListSize" :current='pageNo' :page-size="pageSize" show-total show-elevator @on-change="pageChange"/>
    </div>
	<!-- 删除确认弹窗 -->
    <Modal
        v-model="showDelModal"
        title="确认删除弹窗"
        class="drugmanagement-commondrug-list-delModal">
        <p>确认删除该条复审申请吗？</p>
        <div slot="footer">
            <Button class="cancel-btn btn" @click="showDelModal = false">取消</Button>
            <Button class="save-btn btn" type="primary" :loading="delLoading" @click="handleDel">确认</Button>
        </div>
    </Modal>
    <!-- 模块分类 -->
    <Modal
        v-model="showInfoModal"
        title="选择变更复审信息类别"
        class="drugmanagement-commondrug-list-delModal"
        footer-hide>
        <div>
			<div class="infoP">
				<p class="p1" @click="showInfo(1)">基本信息</p>
			</div>
            <div class="infoP">
				<p class="p2" @click="showInfo(2)">资质信息</p>
			</div>
            <div class="infoP">
				<p class="p3" @click="showInfo(3)">诊疗服务</p>
			</div>
            <div class="infoP">
				<p class="p4" @click="showInfo(4)">诊疗范围</p>
			</div>
            <div class="infoP">
				<p class="p5" @click="showInfo(5)">协议信息</p>
			</div>
            <div class="infoP">
				<p class="p6" @click="showInfo(6)">设立信息</p>
			</div>
            <div class="infoP">
				<p class="p7" @click="showInfo(7)">第三方信息</p>
			</div>
            <div class="infoP">
				<p class="p8" @click="showInfo(8)">医护人员</p>
			</div>
            <div class="infoP">
				<p class="p9" @click="showInfo(9)">收费标准</p>
			</div>
        </div>
    </Modal>
	<basicInfo v-if="basicInfoModal" :basicInfoModal= 'basicInfoModal' :id = 'id' :reasonChange = 'reasonChange' @getSuperviseData='getSuperviseData' :jianguan='JP' />
	<endowmentInfo v-if="endowmentInfoModal" :endowmentInfoModal= 'endowmentInfoModal' :id = 'id' :reasonChange = 'reasonChange' @getSuperviseData='getSuperviseData' />
	<protocolInfo v-if="protocolInfoModal" :protocolInfoModal= 'protocolInfoModal' :id = 'id' :reasonChange = 'reasonChange' @getSuperviseData='getSuperviseData' />
	<serviceInfo v-if="serviceInfoModal" :serviceInfoModal= 'serviceInfoModal' :id = 'id' :reasonChange = 'reasonChange' @getSuperviseData='getSuperviseData' />
	<departmentInfo v-if="departmentInfoModal" :departmentInfoModal= 'departmentInfoModal' :id = 'id' :reasonChange = 'reasonChange' @getSuperviseData='getSuperviseData' />
	<establishInfo v-if="establishInfoModal" :establishInfoModal= 'establishInfoModal' :id = 'id' :reasonChange = 'reasonChange' @getSuperviseData='getSuperviseData' />
	<thirdpartyInfo v-if="thirdpartyInfoModal" :thirdpartyInfoModal= 'thirdpartyInfoModal' :id = 'id' :reasonChange = 'reasonChange' @getSuperviseData='getSuperviseData' />
	<dodtorInfo v-if="dodtorInfoModal" :dodtorInfoModal= 'dodtorInfoModal' :id = 'id' :reasonChange = 'reasonChange' @getSuperviseData='getSuperviseData' />
	<chargeInfo v-if="chargeInfoModal" :chargeInfoModal= 'chargeInfoModal' :id = 'id' :reasonChange = 'reasonChange' @getSuperviseData='getSuperviseData' />
	<comparatRecord v-if="comparatRecordModal" :comparatRecordModal= 'comparatRecordModal' :id = 'id' :businessType = 'businessType' @getSuperviseData='getSuperviseData' />
  </div>
</template>
<script>
// 医生注册信息
import cookie from "@/utils/cookie.js";
import api from "@/api/commonApi";
import fourLevelLinkage from "@/components/fourLevelLinkage";
import basicInfo from "./components/basicInfo";
import endowmentInfo from "./components/endowmentInfo";
import protocolInfo from "./components/protocolInfo";
import serviceInfo from "./components/serviceInfo";
import departmentInfo from "./components/departmentInfo";
import establishInfo from "./components/establishInfo";
import thirdpartyInfo from "./components/thirdpartyInfo";
import dodtorInfo from "./components/dodtorInfo";
import chargeInfo from "./components/chargeInfo";
import comparatRecord from "./components/comparatRecord";

export default {
  components: {
    fourLevelLinkage,
    basicInfo,
    endowmentInfo,
    protocolInfo,
    serviceInfo,
    departmentInfo,
    establishInfo,
    thirdpartyInfo,
    dodtorInfo,
    chargeInfo,
    comparatRecord,
  },
  data() {
    return {
      tableLoading: false,
      province: null,
      city: null,
      area: null,
      hospital: null,
      selections: [],
      superviseListSize: 0,
      list: [],
      pageNo: 1,
      pageSize: 10,
      columns1: [
        {title: "排序",key: "sum",width: 80,align: "center",
          render: (h, params) => {
              let sum = (this.pageNo-1)*this.pageSize + params.index +1;
              return h("span", sum);
          }
        },
        {title: "机构名称",key: "hospitalName",align: "center"},
        {title: "复审类别",key: "businessType",align: "center",
          render: (h, params) => {
            let status = params.row.businessType;
            let name;
            switch (status) {
              case 0:
                name = "基本信息";
                break;
              case 1:
                name = "资质信息";
                break;
              case 2:
                name = "诊疗服务";
                break;
              case 3:
                name = "诊疗范围";
                break;
              case 4:
                name = "协议信息";
                break;
              case 5:
                name = "设立信息";
                break;
              case 6:
                name = "第三方信息";
                break;
              case 7:
                name = "医护人员";
                break;
              case 8:
                name = "收费标准";
                break;
            }
            return h("span", {}, name);
          }
        },
        {title: "申请人",key: "applicant",align: "center"},
        {title: "申请时间",key: "applicantTime",align: "center"},
        {
          title: "审批人",key: "reviewerName",align: "center", 
        },
        {title: "审批时间",key: "reviewTime",align: "center",},
        {title: "审批状态",key: "reviewStatus",align: "center",
          render(h, params) {
            return ['新建', '待审核', '审核通过','驳回'][params.row.reviewStatus];
          }
        },               
        {
          title: "设置",
          key: "iOperate",
          width: 200,
          align: "center",
          render: (h, params) => {
            let row = params.row;
            return h("div", [
              row.reviewStatus==0 ? 
                 h(
                    "span",
                    {
                      props: {
                        type: "primary",
                        size: "small"
                      },
                      style: {
                          color: '#5362E1',
                          margin: "0px 6px"
                      },
                      on: {
                        click: () => {
                          this.updateType(row,1);
                        }
                      }
                    },
                    "提交"
                  )
                : null,
                row.reviewStatus==0 ? '|' : null,
                row.reviewStatus==0 || row.reviewStatus==3 ? 
                 h(
                    "span",
                    {
                      props: {
                        type: "primary",
                        size: "small"
                      },
                      style: {
                          color: '#21c780',
                          margin: "0px 6px"
                      },
                      on: {
                        click: () => {
                          this.handleEdit(row);
                        }
                      }
                    },
                    "编辑"
                  )
                : null,
                row.reviewStatus==0 ? '|' : null,
                row.reviewStatus==0 ? 
                 h(
                    "span",
                    {
                      props: {
                        type: "primary",
                        size: "small"
                      },
                      style: {
                          color: '#fc6c49',
                          margin: "0px 6px"
                      },
                      on: {
                        click: () => {
                          this.handleRemove(row);
                        }
                      }
                    },
                    "删除"
                  )
                : null,
                // row.reviewStatus==1 || row.reviewStatus==2 ? '|' : null,
                row.reviewStatus==1 || row.reviewStatus==2 ? 
                  h(
                    "span",
                    {
                      props: {
                        size: "small"
                      },
                      style: {
                          color: '#5362e1',
                          margin: "0px 6px"
                      },
                      on: {
                        click: () => {
                          this.handleReview(row);
                        }
                      }
                    },
                    "查看"
                  )
                  : null,
                row.reviewStatus==1 ? '|' : null,
                row.reviewStatus==1 ? 
                  h(
                    "span",
                    {
                      props: {
                        size: "small"
                      },
                      style: {
                          color: '#fc6c49',
                          margin: "0px 6px"
                      },
                      on: {
                        click: () => {
                          this.updateType(row,0);
                        }
                      }
                    },
                    "撤销"
                  )
                  : null,
            ]);
          }
        }
      ],
      showInfoModal: false,
	    showDelModal: false,
      delLoading: false,
      curRecord: null,
      businessList: [
        {name:'基本信息',businessType: 0},
        {name:'资质信息',businessType: 1},
        {name:'诊疗服务',businessType: 2},
        {name:'诊疗范围',businessType: 3},
        {name:'协议信息',businessType: 4},
        {name:'设立信息',businessType: 5},
        {name:'第三方信息',businessType: 6},
        {name:'医护人员',businessType: 7},
        {name:'收费标准',businessType: 8},
      ],
      businessType: '',
      basicInfoModal: false,
      endowmentInfoModal: false,
      protocolInfoModal: false,
      serviceInfoModal: false,
      departmentInfoModal: false,
      establishInfoModal: false,
      thirdpartyInfoModal: false,
      dodtorInfoModal: false,
      chargeInfoModal: false,
      comparatRecordModal: false,
      id: '',
      reasonChange: '',
      identity: '',
    };
  },
  created() {
    let breadList = [
      { path: "/index", title: "首页" },
      {
        path: "/index/maintain/indexManagement/index",
        title: "索引管理"
      },
      {
        path: "/index/supervision/qualificationApply/list",
        title: "资质申请"
      }
    ];
    this.$emit("changeBreadList", breadList);
  },
  mounted() {
    let pageNo = this.$route.query.pageNo;
    this.chargeInfoModal = this.$route.query.chargeInfoModal;
    if (pageNo) {
      this.pageNo = pageNo;
    }
    this.getSuperviseData(this.pageNo);
    this.identity = cookie.getCookie("idtt");
    if(this.identity != 5) {
        this.columns1 = this.columns1.filter(col => col.key !== 'iOperate')
    }
  },
  methods: {
    changeProvince(val) {
      this.province = val;
    },
    changeCity(val) {
      this.city = val;
    },
    changeArea(val) {
      this.area = val;
    },
    changeHospital(val) {
      this.hospital = val;
    },
    selectChange(selections) {
        this.selections = selections;
    },
	//复审信息弹窗
	addSecordApply() {
    if(this.identity != 5) {
        this.$Message.error('此部分功能只支持机构管理员使用！');
        return;
    }
		this.showInfoModal = true
    this.resultData()
	},
  resultData(){
    this.basicInfoModal = false
		this.endowmentInfoModal = false
		this.protocolInfoModal = false
		this.serviceInfoModal = false
		this.departmentInfoModal = false
		this.establishInfoModal = false
		this.thirdpartyInfoModal = false
		this.dodtorInfoModal = false
		this.chargeInfoModal = false
		this.comparatRecordModal = false
	},
	//显示具体信息模块
	showInfo(val) {
    this.id = null;
		this.showInfoModal = false
		if(val ==1) {
			this.basicInfoModal = true
		}
		if(val ==2) {
			this.endowmentInfoModal = true
		}
		if(val ==3) {
			this.serviceInfoModal = true
		}
    if(val ==4) {
			this.departmentInfoModal = true
		}
    if(val ==5) {
			this.protocolInfoModal = true
		}
    if(val ==6) {
			this.establishInfoModal = true
		}
    if(val ==7) {
			this.thirdpartyInfoModal = true
		}
    if(val ==8) {
			this.dodtorInfoModal = true
		}
    if(val ==9) {
			this.chargeInfoModal = true
		}
	},
	//更改审核状态
    updateType(val,el) {
      this.$axios.post(api.updateReviewStatusById, {id: val.id,reviewStatus:el}).then(resp => {
				this.$Message.success("操作成功");
				this.getSuperviseData(1)
			}).catch(err => {
				console.log(err);
			});
    },
	//编辑
    handleEdit(item) {
      this.resultData()
      this.id = item.id
      this.reasonChange = item.reasonChange
      // this.showInfoModal = true
      if(item.businessType == 0) {
        this.basicInfoModal = true
      }
      if(item.businessType == 1) {
        this.endowmentInfoModal = true
      }
      if(item.businessType == 2) {
        this.serviceInfoModal = true
      }
      if(item.businessType == 3) {
        this.departmentInfoModal = true
      }
      if(item.businessType == 4) {
        this.protocolInfoModal = true
      }
      if(item.businessType == 5) {
        this.establishInfoModal = true
      }
      if(item.businessType == 6) {
        this.thirdpartyInfoModal = true
      }
      if(item.businessType == 7) {
        this.dodtorInfoModal = true
      }
      if(item.businessType == 8) {
        this.chargeInfoModal = true
      }
    },
    //删除
    handleRemove(record) {
      this.showInfoModal = false
      this.basicInfoModal = false
      this.endowmentInfoModal = false
      this.protocolInfoModal = false
      this.serviceInfoModal = false
      this.departmentInfoModal = false
      this.establishInfoModal = false
      this.thirdpartyInfoModal = false
      this.showDelModal = true;
      this.curRecord = record.id;
    },
    // 确认删除
    handleDel() {
      this.$axios.post(api.updateReviewStatusById, {id: this.curRecord,status:0}).then(resp => {
				this.$Message.success("删除成功");
        this.showDelModal = false;
				this.getSuperviseData(1)
			}).catch(err => {
				console.log(err);
			});
    },
    //查看详情
    handleReview(item) {
      this.comparatRecordModal = true
      this.id = item.id
      this.businessType = item.businessType
      this.reviewStatus = item.reviewStatus
    },
    // 分页
    pageChange(index) {
      this.getSuperviseData(index);
    },
    // 获取页面数据
    getSuperviseData(pageNo) {
      this.basicInfoModal = false
      this.endowmentInfoModal = false
      this.serviceInfoModal = false
      this.departmentInfoModal = false
      this.protocolInfoModal = false
      this.establishInfoModal = false
      this.thirdpartyInfoModal = false
      this.dodtorInfoModal = false
      this.chargeInfoModal = false
      this.comparatRecordModal = false
      if  (pageNo) {
        this.pageNo = Number(pageNo);
      }
      let params = {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        businessType: this.businessType ? this.businessType : '',
      };
    //   params.provinceCode = this.province ? this.province : null;
    //   params.cityCode = this.city ? this.city : null;
    //   params.districtCode = this.area ? this.area : null;
    //   params.hospitalId = this.hospital ? this.hospital : null;
      this.tableLoading = true;
      this.$axios.post(api.findSuperviseReviewApplicantPage, params).then(res => {
        if (res.data.code) {
          let ret = res.data.object;
          this.superviseListSize = ret.total;
          if(ret.records){
            ret.records.forEach((item, index) => {
              item.sum = this.addZeros(index);
            });           
            this.list = ret.records;
          } else {
            this.list = []
          }
        } else {
          this.$Message.info(res.data.message);
        }
        this.tableLoading = false;
      }).catch(() => {
        this.tableLoading = false;
      });
    }
  },
  watch: {
    'pageSize'(nv, ov) {
        this.getSuperviseData(this.pageNo)
    },
  }
};
</script>
<style lang="less" scoped>
.doctorregister {
    padding: 10px;
    width: 100%;
    background: #ffffff;
    box-sizing: border-box;
    margin: 0 auto;
    .margin-up-down {
		display: inline-block;
		margin: 10px 0;
    }
	.addButton{
		border: 1px solid #21c780;
		background-color: #21c780;
	}
    .container {
		width: 100%;
		margin: 0 auto;
		header {
			width: 100%;
			position: relative;
			.search{
				margin: 10px 0;
			}
			
		}
		.list {
			width: 100%;
			margin: 10px 0;
		}
    }
    .page{
        text-align: center;
    }
}
	.infoP {
		color: #fff;
		width: 390px;
		height: 80px;
		line-height: 80px;
		text-align: center;
		margin: 0 auto;
		font-size: 24px;
		margin-bottom: 20px;
		P{
			border-radius: 10px;
		}
	}
	.p1 {
		background-color: #fc6c49;
	}
	.p2 {
		background-color: #19a8e1;
	}
	.p3 {
		background-color: #21c780;
	}
	.p4 {
		background-color: #6666cc;
	}
	.p5 {
		background-color: #66cbcc;
	}
	.p6 {
		background-color: #158afc;
	}
	.p7 {
		background-color: #2ab02b;
	}
	.p8 {
		background-color: #a8804f;
	}
	.p9 {
		background-color: #5fe8b7;
	}
/deep/ .ivu-modal-wrap {
    .ivu-modal{
        float:right !important;
        background-color: #fff;
        border-radius: 10px;
        top: 0px;
        height: 100%;
        overflow-x: hidden;
    }
}
</style>